<template>
  <div class="header-search">
    <a-icon type="search" class="search-icon" @click="enterSearchMode" />
    <a-auto-complete
      ref="input"
      :getPopupContainer="
        (e) => {
          return e.parentNode || document.body
        }
      "
      :dataSource="dataSource"
      :class="['search-input', searchMode ? 'enter' : 'leave']"
      placeholder="站内搜索"
      @blur="leaveSearchMode"
    ></a-auto-complete>
  </div>
</template>

<script>
  export default {
    name: 'HeaderSearch',
    data() {
      return {
        dataSource: ['选项一', '选项二'],
        searchMode: false,
      }
    },
    methods: {
      enterSearchMode() {
        this.searchMode = true
        this.$emit('active', true)
        setTimeout(() => this.$refs.input.focus(), 300)
      },
      leaveSearchMode() {
        this.searchMode = false
        setTimeout(() => this.$emit('active', false), 300)
      },
    },
  }
</script>

<style lang="less">
  .header-search {
    .search-icon {
      font-size: 16px;
      cursor: pointer;
    }
    .search-input {
      border: 0;
      border-bottom: 1px solid @border-color-split;
      transition: width 0.3s ease-in-out;
      input {
        border: 0;
        box-shadow: 0 0 0 0;
      }
      &.leave {
        width: 0;
        input {
          display: none;
        }
      }
      &.enter {
        width: 200px;
        input:focus {
          box-shadow: 0 0 0 0;
        }
      }
    }
  }
</style>
